<template>
    <div>
        <h2>我的订单</h2>
        <el-card v-for="(item, index) in items" :key="index" class="video-card">
            <div slot="header" class="video-header">
                <img :src="item.itemImg" class="video-cover" alt="Video Cover" />
                <div class="video-info">
                    <h3>{{ item.itemName }}</h3>
                </div>
                <p>×{{ item.quantity }}</p>
            </div>
        </el-card>
        <p>总价格：{{order.total}}</p>
        <el-button type="primary" @click="pay()" style="margin-left: 700px">支付订单</el-button>
        <el-button type="danger" @click="cancelOrder()" style="margin-left: 20px">取消订单</el-button>
    </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {findItemByOrderId} from "@/api/customer";
import {getItemListByItemId} from "@/api/item";
import {findOrderByOrderId} from "@/api/customer";
import {deleteOrder,payOrder} from "@/api/order";
import {ElMessage} from "element-plus";
import router from "@/router";
const route=useRoute()
const orderId=ref()
const order=ref({})
const lineItems=ref([{}])
const itemIds=ref([])
const items=ref([{}])
onMounted(async () => {
    orderId.value = route.query.orderId
    let result = await findItemByOrderId(orderId.value)
    lineItems.value=result.data
    for (let i = 0; i < lineItems.value.length; i++) {
        itemIds.value[i]=lineItems.value[i].itemId
    }
    let result2=await getItemListByItemId(itemIds.value)
    items.value=result2.data
    for (let i = 0; i < lineItems.value.length; i++) {
        items.value[i].quantity=lineItems.value[i].quantity
    }
    let result3=await findOrderByOrderId(orderId.value)
    order.value=result3.data
})

async function pay() {
    await payOrder(orderId.value)
    ElMessage({
        type:"success",
        message:"支付成功"
    })
    await router.push('/customer')
}
async function cancelOrder() {
    await deleteOrder(orderId.value)
    ElMessage({
        type:"success",
        message:"取消订单成功"
    })
    await router.push('/customer')

}
</script>

<style scoped>


.video-card {
    margin-bottom: 20px;
}

.video-header {
    display: flex;
    align-items: center;
}

.video-cover {
    width: 100px;
    height: 80px;
    margin-right: 20px;
}

.video-info {
    flex: 1;
}

</style>